<template>
	<view class="wrapper">
		<view class="cu-form-group">
			<view class="title">商品标题</view>
			<input placeholder="商品标题" name="goodstitle" v-model="formData.title"></input>
		</view>
		
		<view class="cu-form-group">
			<view class="title">商品价格</view>
			<input placeholder="商品价格" name="goodstitle" v-model="formData.price"></input>
		</view>
		
		<view class="cu-form-group">
			<view class="title">商品库存</view>
			<input placeholder="商品库存"  v-model="formData.stock"></input>
		</view>
		
		
		<view class="cu-form-group">
			<view class="title">组团成团人数</view>
			<input placeholder="组团成团人数"  v-model="formData.people_num"></input>
		</view>
		
		<view class="cu-form-group">
			<view class="title">组团限时(小时)</view>
			<input placeholder="组团限时(小时)"  v-model="formData.group_hour"></input>
		</view>
		
		<view class="cu-form-group">
			<view class="title">商品详情</view>
			<textarea placeholder="请输入商品描述" rows="5"  v-model="formData.description"></textarea>
		</view>
		
		<view class="want">
			<view class="padding-bj flex justify-between align-center">
				<view class="text-30">商品主图</view>
			</view>
			<view class="grid col-4 grid-square flex-sub padding-lr-bj">
				
				<view @tap="handleImage()">
					<view v-if="formData.mainimg" class="item">
						<image :src="config.cdnurl+formData.mainimg" mode="widthFix" style="width:150rpx;height:150rpx"></image>
					</view>
					<view v-else class="item">
						<view class="text-lg text-gray">
							<text class="wlIcon-tianjia"></text>
							<view class="margin-top-xs text-sm">添加图片</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
		
		
		<view class="want">
			<view class="padding-bj flex justify-between align-center">
				<view class="text-30">商品相册</view>
			</view>
			<view class="grid col-4 grid-square flex-sub padding-lr-bj">
				<view
					v-if="formData.photos.length > 0"
					v-for="(item, index) in formData.photos"
					:key="index"
				>
					<view class="item" @tap="handlePreview(index)">
						<image :src="config.cdnurl+item" mode="widthFix"></image>
					</view>
					<view class="tag" @tap="handleDelImage(index)">
						<text class="wlIcon-31guanbi text-white"></text>
					</view>
				</view>
				<view v-if="formData.photos.length < 9" @tap="handlePhotos()">
					<view class="item">
						<view class="text-lg text-gray">
							<text class="wlIcon-tianjia"></text>
							<view v-if="formData.photos.length === 0" class="margin-top-xs text-sm">添加图片</view>
							<view v-else class="margin-top-xs text-sm">继续添加</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
		
		<view class="submitwrapper">
			<button class="submit" @click="submitGoods">提交</button>	
		</view>
		

		
	</view>
</template>

<script>
	import config from "../../common/config/config.js"
	export default {
		data() {
			return {
				config,
				formData:{
					title:"",		//商品标题
					mainimg:"",		//商品主图
					photos:[],       //相册图片
					price:"",
					stock:"",
					people_num:"",
					group_hour:""
				}
			}
		},
		methods: {
			handleImage() {
				uni.chooseImage({
					crop: {
						quality: 60
					},
					success: res => {
						uni.request({
							url: '/wanlshop/common/uploadData',
							success: updata => {
								for (let i = 0; i < res.tempFilePaths.length; i++) {
									// 读取图片宽高
									uni.getImageInfo({
										src: res.tempFilePaths[i],
										success: image => {
											uni.uploadFile({
												url: updata.data.uploadurl,  ///api/common/upload
												filePath: image.path,
												name: 'file',
												formData:updata.data.storage == 'local' ? null : updata.data.multipart,
												success: data => {
													if(JSON.parse(data.data).code == 1){
														//this.params.images.push(JSON.parse(data.data).data.url)
														console.log(JSON.parse(data.data));
														this.formData.mainimg = JSON.parse(data.data).data.url;
														
													}
												},
												fail: error =>{
													uni.showToast({title: JSON.parse(error.data).msg, icon: 'error', position: true});
												}
											});
										}
									});
								}
							}
						});
					}
				});
			},
		
			handlePhotos() {
				let that = this;
				uni.chooseImage({
					crop: {
						quality: 60
					},
					success: res => {
						uni.request({
							url: '/wanlshop/common/uploadData',
							success: updata => {
								for (let i = 0; i < res.tempFilePaths.length; i++) {
									// 读取图片宽高
									uni.getImageInfo({
										src: res.tempFilePaths[i],
										success: image => {
											uni.uploadFile({
												url: updata.data.uploadurl,  ///api/common/upload
												filePath: image.path,
												name: 'file',
												formData:updata.data.storage == 'local' ? null : updata.data.multipart,
												success: data => {
													if(JSON.parse(data.data).code == 1){
														console.log(JSON.parse(data.data))
														console.log(JSON.parse(data.data).url);
														that.formData.photos.push(JSON.parse(data.data).data.url);
														console.log(this.formData.photos)
													}
												},
												fail: error =>{
													uni.showToast({title: JSON.parse(error.data).msg, icon: 'error', position: true});
												}
											});
										}
									});
								}
							}
						});
					}
				});
			},
				
			handlePreview(index) {
				let imgArr = [];
				for (let item of this.formData.photos) {
					imgArr = imgArr.concat(this.$wanlshop.oss(item, 500));
				}
				uni.previewImage({
					urls: imgArr,
					current: imgArr[index],
					indicator: 'number'
				});
			},
			
			handleDelImage(index) {
				this.formData.photos.splice(index, 1);
			},
		
			submitGoods(){
				if(!this.formData.title){
					uni.showToast({
						title:"商品标题不能为空",
						icon:""
					})
					return;
				}
				
				
			}
		
		
		}
	}
</script>

<style lang="scss" scoped>
	
	.grid {
		position: relative;
		.item {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			border-radius: 18rpx;
			overflow: hidden;
			background-color: #f0f0f0;
		}
		.tag {
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			z-index: 3;
			width: 40rpx;
			height: 40rpx;
			border-radius: 5500rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			overflow: hidden;
			background-color: #e6162c;
		}
	}
	.wrapper{
		position:relative;
		width:100%;
		min-height:100vh;
		padding-bottom:120rpx;
		box-sizing: border-box;
		.submitwrapper{
			position: absolute;
			bottom:0;
			left:0;
			display:flex;
			justify-content:center;
			align-items: center;
			.submit{
				display:inline-block;
				width:100vw;
				height:80rpx;
				background-color:coral;
				color:#fff;
				border-radius: 0;
			}
		}

	}

</style>